<template>
  <div id="home-info">
    <van-row v-for="(item,index) in goodsList" :key="index">
      <van-row>
        <img :src="item.floor_title.image_src" alt="">
      </van-row>
      <!-- 下 -->
      <van-row>
        <!-- 左 -->
        <van-col span="8" class="vant-left">
          <img :src="item.product_list[0].image_src" alt="">
        </van-col>
        <!-- 右 -->
        <van-col span="16" class="vant-right">
          <van-row>
            <van-col span="12">
              <img :src="item.product_list[1].image_src" alt="">
            </van-col>
            <van-col span="12">
              <img :src="item.product_list[2].image_src" alt="">
            </van-col>
          </van-row>
          <van-row>
            <van-col span="12">
              <img :src="item.product_list[3].image_src" alt="">
            </van-col>
            <van-col span="12">
              <img :src="item.product_list[4].image_src" alt="">
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </van-row>

  </div>
</template>

<script>
import Vue from 'vue';
import { Col, Row } from 'vant';
import 'vant/lib/col/style'
import 'vant/lib/row/style'

Vue.use(Col);
Vue.use(Row);
export default {
  name:"HomeInfo",
  created() {
    this.$http({
    url:"/api/public/v1/home/floordata",
    methods:'get'
    }).then(res=>{
      console.log(res.data.message);
      this.goodsList=res.data.message
    })
  },
  data() {
    return {
      goodsList:[]
    }
  },
}
</script>

<style scoped>
  #home-info img{
    width: 95%;
  }
  .vant-right img{
    height: 98px;
  }
  .vant-left img{
    height: 200px;
  }
  
</style>